<style lang="scss" scoped>
    .address{
        height: 100vh;
        background-color: #f5f5f5;
        .list{
            padding: 15px 4%;
            box-sizing: border-box;
            height: calc(100vh - 110px);
            overflow-y: auto;
        }
        .btn{
            height: 64px;
            padding: 0 4%;
            display: flex;
            align-items: center;
        }
    }
</style>
<template>
    <div class="address">
        <navigator
            :back="true"
            :title="'新增收货地址'"
        />
        <!-- 列表区域 -->
        <div class="list">
            <van-address-edit
                :area-list="areaList"
                show-set-default
                :search-result="searchResult"
                :area-columns-placeholder="['请选择', '请选择', '请选择']"
                @save="onSave"
            />
        </div>
    </div>
</template>
<script>
import navigator from '@/components/navigator.vue';
// 引入vant官方的 地址选择数据
import { areaList } from '@vant/area-data';
// 引入新增收货地址
import {
    addAddress
} from '@/api'
export default {
    methods: {
        onSave({
            name, //姓名
            tel, //手机号
            province, //省份
            city, //城市
            county, //区县
            addressDetail, //详细地址
            isDefault //是否默认
        }){
            // 重新赋值
            let obj = {
                name,
                phone: tel,
                a_provice: province,
                a_city: city,
                a_code: county,
                a_desc: addressDetail,
                is_select: Number(isDefault)
            }
            // 添加地址
            addAddress(obj).then(res => {
                if(res.data.code === 1){
                    this.$toast('添加成功');
                    setTimeout(() => {
                        this.$router.back()
                    }, 800);
                }else{
                    this.$toast(res.data.msg);
                }
            })
        }
    },
    data() {
        return {
            areaList,
            searchResult: []
        }
    },
    components : {
        navigator
    }
}
</script>